<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 2em;
			list-style: none;
		}
	</style>
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>WebSocket</h4>
				<p>
					WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。
					使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。
					WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
				</p>
				<pre>
	&lt;form action="/" method="get"&gt;
		&lt;input type="text" name="keywords" id="keywords" value="" /&gt;
		&lt;input type="submit" value="搜索" /&gt;
	&lt;/form&gt;		
			
	var btnSubmit = document.querySelector("input[type='submit']");
	btnSubmit.addEventListener('click',function(e){
		e.preventDefault();
		var keywords = document.querySelector("#keywords");
		wx.send(keywords.value);
	})
	
	var wx = new WebSocket('ws://echo.websocket.org');
	wx.onopen=function(){
		console.log("Connection open...");
		wx.send('hi websocket');
	}
	wx.onmessage=function(evt){
		console.log(evt)
		console.log('recevied Msg:'+evt.data)
	}
	wx.onclose=function(e){
		console.log("close",e)
	};		
				</pre>
				<h4>9个属性</h4>
				<ul>
					<li>binaryType 返回websocket连接所传输二进制数据的类型（blob, arraybuffer）</li>
					<li>bufferedAmount 只读 返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。
					一旦队列中的所有数据被发送至网络，则该属性值将被重置为0。
					但是，若在发送过程中连接被关闭，则属性值不会重置为0。</li>
					<li>extensions 只读 返回服务器选择的扩展名。这当前只是空字符串或连接协商的扩展列表</li>
					<li>onclose 用于指定连接失败后的回调函数</li>
					<li>onmessage 用于指定当从服务器接受到信息时的回调函数</li>
					<li>onopen 用于指定连接成功后的回调函数</li>
					<li>protocol 只读 服务器选择的下属协议</li>
					<li><div>eadyState 只读 当前的链接状态，共4个</div>
						<ul>
							<li>0 建立连接</li>
							<li>1 已经连接</li>
							<li>2 正在关闭</li>
							<li>3 连接已经关闭或者没有连接成功</li>
						</ul>
					</li>
					<li>url 只读 WebSocket 的绝对路径</li>
				</ul>
				<h4>2个方法</h4>
				<ul>
					<li>close(code, reason) 数字状态码 可选 默认 1005和一个可选的类可读的字符串，
					它解释了连接关闭的原因</li>
					<li>send(data) 向服务器发送数据（ArrayBuffer，Blob等）</li>
				</ul>
				<p>WebSocket一种在单个 TCP 连接上进行全双工通讯的协议，使得客户端和服务器之间的数据交换变得更加简单。
				允许服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
				主要是建立一个实时链接，状态一但关闭就不能再次连接，虽然WebSocket对象还是能打印出来</p>
				<ul>
					<li>1、较少的控制开销，在进行客户端与服务器的数据交换时，用于协议控制的数据包头较小</li>
					<li>2、更强的实时性，全双工通信，不必局限于一方发起的请求，服务器与客户端可以随时发送数据，延迟更少</li>
					<li>3、有状态的连接，websocket在通信之前需要双方建立连接，才能进行通信，
					而http协议在每次请求都要携带状态信息</li>
					<li>4、基于二进制数据传输，websocket定义了二进制帧，可以处理二进制内容，相比于文本传输，提高了效率</li>
					<li>5、支持自定义子协议，可以自行扩展协议，如部分浏览器支持压缩等</li>
					<li>6、更好的压缩效果，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，
					在传递类似的数据时，可以显著地提高压缩率</li>
					<li>7、协议标识符是ws（如果加密，则为wss），即ws对应http，wss对应https。
					服务器网址就是 URL。即ws://www.xx.com或wss://www.xx.com</li>
					<li>8、没有同源限制，客户端可以与任意服务器通信。</li>
				</ul>
				<h4>缺点:</h4>
				<p>
					即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，
					其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源
				</p>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>